<template>
  <!-- 侧边栏 -->
  <el-drawer v-model="showDrawer" :direction="direction" class="drawer" size="47%">
    <template #title>
      <h4 class="drawerTitle">客户明细</h4>
    </template>
    <template #default>
      <el-form :model="searchData" v-if="false">
        <el-form-item label="成员搜索" class="searchItem">
          <el-input v-show="false" v-model="searchKeyWord" placeholder="请输入成员名称" />
          <el-input v-model="searchKeyWord" placeholder="请输入成员名称" />
        </el-form-item>
      </el-form>
      <el-table max-height="550" ref="multipleTableRef" :data="searchData" stripe style="width: 100% height: 200px" @selection-change="handleSelectionChange" class="tableData" :header-cell-style="{ background: '#F9F9F9', color: '#33302D' }">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="客户信息" width="280">
          <template #default="scope">
            <div class="cusInfo">
              <el-image style="width: 36px; height: 36px" :src="scope.row.cust_avatar" fit="cover" class="avatar">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <icon-picture />
                    </el-icon>
                  </div>
                </template>
              </el-image>
              <div class="cusName">{{ scope.row.cust_name }}</div>
              <div class="cust_border" v-if="scope.row.cust_nickname">|</div>
              <div class="cust_nickname" v-if="scope.row.cust_nickname">{{ scope.row.cust_nickname }}</div>
              <div class="cust_remark" v-if="scope.row.cust_remark">
                <span class="cust_remark_text">( {{ scope.row.cust_remark }}</span> <span>)</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="群名称">
          <template #default="scope">
            <div class="cusInfo">
              <img style="width: 40px" class="group_icon" :src="scope.row.groupchat_avatar" alt="" />
              <div class="name">{{ scope.row.groupchat_name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客户状态">
          <template #default="scope">
            <div>{{ scope.row.cust_status }}</div>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" width="180">
          <template #default="scope">
            <div>
              <p>{{ scope.row.created_at }}</p>
            </div>
          </template>
        </el-table-column>
        <template #empty>
          <div style="height: 500px" class="emty">
            <img class="emty_img" src="@/assets/noData.png" alt="" />
            <div class="emty_title">{{ filterData.length || '暂无数据' }}</div>
          </div>
        </template>
      </el-table>
      <el-pagination
        v-model:currentPage="cusPage.page"
        :page-sizes="[15, 25, 50, 100]"
        v-model:page-size="cusPage.page_size"
        background
        layout="total, prev, pager, next, sizes"
        :total="cusPage.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { groupDetail } from '@/api/smartMarketing/drainage/channelCode/index'

  import bus from '@/utils/bus'
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const showDrawer = ref(false) // 显示右边侧边来
  const searchData = ref([]) // 搜索数据

  const pageData = ref({
    activity_id: '',
    page: 1,
    page_size: 15
  })
  const cusPage = reactive({
    page: 1,
    page_size: 15,
    total: ''
  })
  const filterData = ref([])
  const customer = ref([]) // 选中的删除客户
  const handleSelectionChange = (val: any) => {
    const arr = []
    val.map((item: any) => {
      arr.push(item.id)
    })
    customer.value = arr
    bus.emit('isCheckAll', arr)
  }

  const getDelList = (data: any) => {
    groupDetail(data).then((res: any) => {
      filterData.value = res.list
      searchData.value = res.list
      cusPage.total = res.total
    })
  }
  // 客户明细
  const check = (data: any) => {
    showDrawer.value = true
    pageData.value.activity_id = data.id
    getDelList(pageData.value)
  }
  const handleSizeChange = (val: number) => {
    pageData.value.page_size = val
    getDelList(pageData.value)
  }
  const handleCurrentChange = (val: number) => {
    pageData.value.page = val
    getDelList(pageData.value)
  }

  defineExpose({
    check,
    customer,
  })
</script>
<style scoped lang="scss">
  .tableData {
    background: #ffffff;
    border: 1px solid #eaeaea;

    .cusInfo {
      display: flex;
      align-items: center;
      .cusName {
        margin-left: 5px;
      }
      .cust_border {
        margin: 0 5px;
      }

      .cust_nickname {
        max-width: 70px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 5px;
      }

      .cust_remark {
        &_text {
          width: 50px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 4px;

        .image-slot {
          .el-icon {
            font-size: 36px;
          }
        }
      }

      .name {
        margin: 0 5px;
      }

      .channel {
        font-size: 14px;
        color: #60b900;
      }

      .sex {
        width: 18px;
        height: 18px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .handle {
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;

      .btn_item {
        padding: 0 8px;
        margin: 0 8px 12px 0px;
        text-align: center;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #eaeaea;
        cursor: pointer;
      }
    }

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .tag_item {
        padding: 4px;
        color: #ff6b00;
        margin: 0 10px 10px 0;
        border-radius: 2px;
        border: 1px solid #ffc69e;

        &:nth-child(n + 6) {
          display: none;
        }
      }
    }

    .emty {
      margin-top: 200px;
    }

    .emty_img {
      transform: translateX(15%);
    }

    .emty_title {
      margin-top: -50px;
    }
  }

  .conceal {
    display: flex;
    flex-wrap: wrap;

    &_tag_item {
      padding: 4px;
      color: #ff6b00;
      margin: 0 10px 10px 0;
      border-radius: 2px;
      border: 1px solid #ffc69e;
    }
  }

  :deep .searchItem {
    padding-bottom: 19px;
    border-bottom: 1px solid #eaeaea;
  }

  .msg {
    text-align: center;
    padding: 50px 0;
  }

  :deep .el-drawer {
    width: 35%;
  }
   .handle {
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;

      .el-button {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 80px;
        height: 24px;
        padding: 0;
        margin: 0 4px 8px;
        border: 1px solid #eaeaea;
        border-radius: 2px;
        text-align: center;
        background: #fff;
      }
    }
</style>
